<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta charset="utf-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
    <title>心理测试</title>
    <style>
        /*样式初始化*/
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body {
            color: #333;
            background-image: url('images/bg4.jpg');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-size: 100%;
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
            font-weight: normal;
        }

        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        }

        img {
            border: none;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input,
        textarea,
        select,
        button {
            font-size: 14px;
            outline: none
        }

        table {
            border-collapse: collapse;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .container {
            position: relative;
            height: 100%;
            top: 0.8108108108108109rem;
            width: 100%;
        }

        .container .h1 {
            color: #eee;
            font-size: 0.5405405405405406rem;
            font-weight: bold;
            text-align: center;
        }

        .container .test {
            position: absolute;
            width: 8.108108108108109rem;
            left: 50%;
            margin-left: -4.054054054054054rem;
            height: 10.81081081081081rem;
            color: #666;
            border-radius: 0.2702702702702703rem;
            background: #fff;
            transition: all .5s linear;
            box-shadow: 0 0 0.08108108108108109rem 0.02702702702702703rem #eee;
        }

        h2,
        p {
            font-size: 0.4864864864864865rem;
            font-weight: bold;
            padding: 0.5405405405405406rem 0.5405405405405406rem;
        }

        .test p {
            color: #fff;
            border-radius: 0.2702702702702703rem 0.2702702702702703rem 0 0;
            background: #409EFF;
        }

        .test p i {
            font-style: normal;
            font-size: 0.3783783783783784rem;
        }

        .test main {
            padding: 0.5405405405405406rem;
            height: 6.756756756756757rem;
            overflow-y: auto;
        }

        .test main .option {
            font-size: 0.3783783783783784rem;
            margin-bottom: 0.40540540540540543rem;
            padding: 0.21621621621621623rem;
            color: #666;
            border-radius: 0.10810810810810811rem;
        }

        .test footer {
            position: absolute;
            margin-top: 0.2702702702702703rem;
            bottom: 0.2702702702702703rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .test footer div {
            padding: 0.2702702702702703rem 0.5405405405405406rem;
            text-align: center;
            color: #fff;
            background-color: #f56c6c;
            border-radius: 0.13513513513513514rem;
            transition: all .5s linear;
        }

        /* .prev{
            background-color: #f56c6c;
         } */
        /* .next{
             background-color: #67c23a;
         }*/
        .submit {
            background-color: #409eff !important;
        }

        .page {
            position: absolute;
            left: 50%;
            color: #fff;
            width: 100%;
            text-align: center;
            margin-left: -50%;
            top: 13.216216216216216rem;
        }

        .active {
            transform: translateY(-27.027027027027028rem) !important;
        }

        .colorActive {
            color: #fff !important;
            background-color: #e6a23c !important;
        }
    </style>
</head>

<body>
    <div class="container " id="app">
        <h1 class="animated fadeInDown h1">你现在阳光加州，还是地下城</h1>
        <div class="test" v-for="(item,index) in testArr" :key="index">
            <p>{{index+1}}、{{item.topic}}<i>（可多选）</i></p>
            <main>
                <div class="option" v-for="(ite, i) in item.options" :class="[ite.isSelect?'colorActive':'']" :key="i"
                    @click="select(index,i)">
                    {{ite.option}}
                </div>
            </main>
            <footer>
                <div class="animated prev" :hidden="index==0" @click="prev(index)">上一题</div>
                <div class="animated zoomIn faster next" v-if="item.options.filter(ele=>{return ele.isSelect==true}).length>0 && index!=testArr.length-1"
                    @click="next(index)">下一题</div>
                <div class="animated fadeInRight faster submit" v-if="item.options.filter(ele=>{return ele.isSelect==true}).length>0 && index==testArr.length-1"
                    @click="submitBtn()">提交</div>
            </footer>
        </div>
        <div class="page">
            {{activeIndex}} / {{testArr.length}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    resultContext: '',
                    testArr: [
                        {
                            topic: "关于晨起", options: [
                                { option: "A、每天早晨醒来，都是新的开始", score: 0, isSelect: false },
                                { option: "B、睁眼第一件事,就是关掉烦人的闹钟", score: 3, isSelect: false },
                                { option: "C、精力充沛的早晨,是高效工作的开始", score: 0, isSelect: false },
                                { option: "D、每天起床,都是另一个糟糕循环的开始", score: 3, isSelect: false }]
                        },
                        {
                            topic: "关于未来", options: [
                                { option: "A、成功的路上有我,也有你", score: -1, isSelect: false },
                                { option: "B、体验才是人生的意义", score: -1, isSelect: false },
                                { option: "C、未来已经到来,只是尚未流行", score: -1, isSelect: false },
                                { option: "D、未来就像看不见远方的路,和没有灯的夜晚", score: 3, isSelect: false },
                                { option: "E、在看得见的未来,我就像爸妈这代人,带孙子跳广场舞", score: 2, isSelect: false }
                            ]
                        },
                        {
                            topic: '关于运动', options: [
                                { option: "A、坚持健身是我的最爱", score: -1, isSelect: false },
                                { option: "B、每天累成狗,实在不想动", score: 2, isSelect: false },
                                { option: "C、想让我运动,我还需要额外的动力", score: 2, isSelect: false },
                            ]
                        },
                        {
                            topic: "亲密关系", options: [
                                { option: "A、不想回家", score: 3, isSelect: false },
                                { option: "B、想到他/她就烦", score: 3, isSelect: false },
                                { option: "C、她/他是我的太阳,一想到就阳光遍地", score: -1, isSelect: false },
                                { option: "D、没什么人让我觉得很重要", score: 1, isSelect: false },
                            ]
                        },
                        {
                            topic: '关于睡眠', options: [
                                { option: "A、每天很久才能睡着", score: 3, isSelect: false },
                                { option: "B、每天睡得不踏实", score: 2, isSelect: false },
                                { option: "C、总是睡不够", score: 2, isSelect: false },
                                { option: "D、得跟猪一样好", score: -1, isSelect: false },
                            ]
                        },
                        {
                            topic: "关于闺蜜和朋友", options: [
                                { option: "A、朋友遍天下,知心没几个", score: 1, isSelect: false },
                                { option: "B、几乎没有人了解我", score: 3, isSelect: false },
                                { option: "C、没有人可以倾诉", score: 3, isSelect: false },
                                { option: "D、我是party之王", score: -1, isSelect: false }
                            ]
                        },
                        {
                            topic: "关于上班", options: [
                                { option: "A、上班就像打了鸡血", score: 0, isSelect: false },
                                { option: "B、工作很无聊,生活才重要", score: 0, isSelect: false },
                                { option: "C、上班就像进了牢房,总想逃", score: 2, isSelect: false },
                                { option: "D、上班是我实现人生梦想的一部分", score: -1, isSelect: false },
                                { option: "E、虽然坐在办公桌前,却没有工作效率", score: 3, isSelect: false },
                            ]
                        },
                        {
                            topic: "关于情绪", options: [
                                { option: "A、很容易发牌气,靠近我的人都会倒霉", score: 3, isSelect: false },
                                { option: "B、每天都很down,几乎没有开心的时候", score: 3, isSelect: false },
                                { option: "C、每天很平常,没什么起伏", score: 1, isSelect: false },
                                { option: "D、我就是开心果，不一样的果果", score: -1, isSelect: false },
                                { option: "E、最近好事连连,不开心都不行啊", score: -1, isSelect: false },
                            ]
                        }
                    ],
                    activeIndex: '1'
                }
            },
            methods: {
                /***下一题***/
                next(i) {
                    this.activeIndex = i + 2;
                    if (i < this.testArr.length - 1) {
                        let top = parseInt(this.testArr.length) * 10;
                        $($('.test')[i]).addClass('active');
                        let scale = '1';
                        for (let j = 0; j < this.testArr.length; j++) {
                            //被遮挡的题目
                            if (j > i) {
                                $('.test')[j].style.top = top / 37.5 + 'rem';
                                $('.test')[j].style.transform = "scale(" + scale.toString() + ")";
                                scale = ((scale * 10) - (0.1 * 10)) / 10;
                                top = top - 30;
                            }
                            //只显示3道题
                            if (j > i + 3) {
                                $('.test')[j].style.display = "none";
                            } else {
                                $('.test')[j].style.display = "block";
                            }
                        }
                    }

                },
                /***上一题***/
                prev(i) {
                    this.activeIndex = i;
                    //动画
                    if (i != 0) {
                        let top = parseInt(this.testArr.length) * 10;
                        $($('.test')[i - 1]).removeClass('active')
                        let scale = '1';
                        for (let j = 0; j < this.testArr.length; j++) {
                            //被遮挡的题目
                            if (j >= i - 1) {
                                $('.test')[j].style.top = top / 37.5 + 'rem';
                                $('.test')[j].style.transform = "scale(" + scale.toString() + ")";
                                scale = ((scale * 10) - (0.1 * 10)) / 10;
                                top = top - 30;
                            }
                            //只显示3道题
                            if (j > i + 1) {
                                $('.test')[j].style.display = "none";
                            } else {
                                $('.test')[j].style.display = "block";
                            }
                        }

                    }
                },
                /***提交***/
                submitBtn() {
                    let sum = 0;
                    for (let i = 0; i < this.testArr.length; i++) {
                        let newArr = this.testArr[i].options.filter(ele => {
                            return ele.isSelect == true;
                        })
                        let scoreArr = newArr.map(ele => {
                            return ele.score;
                        })
                        if (scoreArr.sort()[0] < 0) {
                            sum = 0;
                            location.href = 'http://192.168.0.102:8002?sum=' + sum;
                            return;
                        } else {
                            sum += scoreArr.sort()[scoreArr.length - 1]
                        }

                    }
                    location.href = 'http://192.168.0.102:8002?sum=' + sum;

                },
                select(index, i) {
                    if (this.testArr[index].options[i].isSelect) {
                        this.$set(this.testArr[index].options[i], 'isSelect', false);
                    } else {
                        this.$set(this.testArr[index].options[i], 'isSelect', true);
                    }
                },
            },
            mounted() {
                let top = parseInt(this.testArr.length) * 10;
                let zIndex = parseInt(this.testArr.length);
                let scale = '1';
                for (let i = 0; i < this.testArr.length; i++) {
                    $('.test')[i].style.top = top / 37.5 + 'rem';
                    $('.test')[i].style.zIndex = zIndex;
                    $('.test')[i].style.transform = "scale(" + scale + ")";
                    //只显示3道题
                    if (i > 2) {
                        $('.test')[i].style.display = "none";
                    } else {
                        $('.test')[i].style.display = "block";
                    }
                    top = top - 30;
                    zIndex--;
                    scale = ((scale * 10) - (0.1 * 10)) / 10;
                }
            }
        })
    </script>
</body>

</html>